
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>项目依赖关系报告</title>
  <style>
    body {
      font-family: Arial, "Microsoft YaHei", sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      color: #333;
      background-color: #f5f5f5;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    header {
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
    }
    h1 {
      color: #2c3e50;
      margin-top: 0;
    }
    .stats {
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: 4px;
      margin-bottom: 20px;
      border-left: 4px solid #007bff;
    }
    .file-node {
      margin: 10px 0;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #fff;
    }
    .file-node:hover {
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .file-path {
      font-weight: bold;
      color: #0066cc;
      cursor: pointer;
      padding: 5px;
      background-color: #f0f7ff;
      border-radius: 3px;
    }
    .dependencies {
      margin-left: 20px;
      margin-top: 10px;
      display: none;
    }
    .dependencies.active {
      display: block;
    }
    .dependency {
      margin: 5px 0;
      color: #555;
      padding: 3px 6px;
      border-radius: 3px;
      background-color: #f8f9fa;
    }
    .search-container {
      margin-bottom: 20px;
    }
    .search-input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 16px;
    }
    .timestamp {
      font-size: 12px;
      color: #777;
    }
    .filter-container {
      margin-bottom: 15px;
    }
    .filter-label {
      margin-right: 15px;
    }
    .resolved {
      color: #28a745;
    }
    .unresolved {
      color: #dc3545;
    }
    .toggle-all {
      margin-bottom: 15px;
      background-color: #0066cc;
      color: white;
      border: none;
      padding: 8px 15px;
      border-radius: 4px;
      cursor: pointer;
    }
    .toggle-all:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>项目依赖关系报告</h1>
      <p class="timestamp">生成时间: 2025/4/24 11:29:53</p>
    </header>
    
    <div class="stats">
      <p><strong>文件总数:</strong> 15</p>
      <p><strong>依赖总数:</strong> 39</p>
    </div>
    
    <div class="filter-container">
      <button class="toggle-all" id="toggleAll">展开/折叠全部</button>
    </div>
    
    <div class="search-container">
      <input type="text" class="search-input" id="searchInput" placeholder="搜索文件路径...">
    </div>
    
    <div id="dependency-tree">

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">index.js (5)</div>
        <div class="dependencies">
          <div class="dependency unresolved">commander </div>
          <div class="dependency unresolved">path </div>
          <div class="dependency unresolved">chalk </div>
          <div class="dependency unresolved">./migrator </div>
          <div class="dependency unresolved">../package.json </div>
        </div>
      </div>

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">migrator.js (8)</div>
        <div class="dependencies">
          <div class="dependency unresolved">path </div>
          <div class="dependency unresolved">fs </div>
          <div class="dependency unresolved">./analyzers </div>
          <div class="dependency unresolved">./resolvers </div>
          <div class="dependency unresolved">./reporters </div>
          <div class="dependency unresolved">./utils/fileUtils </div>
          <div class="dependency unresolved">./utils/configUtils </div>
          <div class="dependency unresolved">chalk </div>
        </div>
      </div>

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">..\package.json (0)</div>
        <div class="dependencies">
          <div class="dependency">无依赖</div>
        </div>
      </div>

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">analyzers\index.js (4)</div>
        <div class="dependencies">
          <div class="dependency unresolved">./jsAnalyzer </div>
          <div class="dependency unresolved">./cssAnalyzer </div>
          <div class="dependency unresolved">./vueAnalyzer </div>
          <div class="dependency unresolved">path </div>
        </div>
      </div>

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">resolvers\index.js (2)</div>
        <div class="dependencies">
          <div class="dependency unresolved">./pathResolver </div>
          <div class="dependency unresolved">./aliasResolver </div>
        </div>
      </div>

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">reporters\index.js (1)</div>
        <div class="dependencies">
          <div class="dependency unresolved">./htmlReporter </div>
        </div>
      </div>

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">utils\fileUtils.js (3)</div>
        <div class="dependencies">
          <div class="dependency unresolved">fs </div>
          <div class="dependency unresolved">path </div>
          <div class="dependency unresolved">glob </div>
        </div>
      </div>

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">utils\configUtils.js (3)</div>
        <div class="dependencies">
          <div class="dependency unresolved">path </div>
          <div class="dependency unresolved">fs </div>
          <div class="dependency unresolved">../../config/default </div>
        </div>
      </div>

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">analyzers\jsAnalyzer.js (3)</div>
        <div class="dependencies">
          <div class="dependency unresolved">@babel/parser </div>
          <div class="dependency unresolved">@babel/traverse </div>
          <div class="dependency unresolved">fs </div>
        </div>
      </div>

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">analyzers\cssAnalyzer.js (1)</div>
        <div class="dependencies">
          <div class="dependency unresolved">fs </div>
        </div>
      </div>

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">analyzers\vueAnalyzer.js (3)</div>
        <div class="dependencies">
          <div class="dependency unresolved">fs </div>
          <div class="dependency unresolved">./jsAnalyzer </div>
          <div class="dependency unresolved">./cssAnalyzer </div>
        </div>
      </div>

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">resolvers\pathResolver.js (3)</div>
        <div class="dependencies">
          <div class="dependency unresolved">fs </div>
          <div class="dependency unresolved">path </div>
          <div class="dependency unresolved">./aliasResolver </div>
        </div>
      </div>

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">resolvers\aliasResolver.js (1)</div>
        <div class="dependencies">
          <div class="dependency unresolved">path </div>
        </div>
      </div>

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">reporters\htmlReporter.js (2)</div>
        <div class="dependencies">
          <div class="dependency unresolved">fs </div>
          <div class="dependency unresolved">path </div>
        </div>
      </div>

      <div class="file-node">
        <div class="file-path" onclick="toggleDependencies(this)">..\config\default.js (0)</div>
        <div class="dependencies">
          <div class="dependency">无依赖</div>
        </div>
      </div>

    </div>
  </div>
  
  <script>
    function toggleDependencies(element) {
      const dependencies = element.nextElementSibling;
      dependencies.classList.toggle('active');
    }
    
    document.getElementById('searchInput').addEventListener('input', function() {
      const searchTerm = this.value.toLowerCase();
      const fileNodes = document.querySelectorAll('.file-node');
      
      fileNodes.forEach(node => {
        const filePath = node.querySelector('.file-path').textContent.toLowerCase();
        if (filePath.includes(searchTerm)) {
          node.style.display = 'block';
        } else {
          node.style.display = 'none';
        }
      });
    });
    
    document.getElementById('toggleAll').addEventListener('click', function() {
      const allDependencies = document.querySelectorAll('.dependencies');
      const anyActive = Array.from(allDependencies).some(el => el.classList.contains('active'));
      
      allDependencies.forEach(el => {
        if (anyActive) {
          el.classList.remove('active');
        } else {
          el.classList.add('active');
        }
      });
    });
  </script>
</body>
</html>
